<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <title>购物车 - 花店商城</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .cart-img {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="${pageContext.request.contextPath}/shop">花店商城</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="${pageContext.request.contextPath}/shop/cart">购物车</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="${pageContext.request.contextPath}/shop/orders">我的订单</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <span class="nav-link">欢迎, ${sessionScope.user.username}</span>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="${pageContext.request.contextPath}/shop/logout">退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <h2>我的购物车</h2>
        
        <c:if test="${empty cartItems}">
            <div class="alert alert-info">
                购物车是空的，快去 <a href="${pageContext.request.contextPath}/shop">选购商品</a> 吧！
            </div>
        </c:if>
        
        <c:if test="${not empty cartItems}">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>商品</th>
                            <th>名称</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach items="${cartItems}" var="item">
                            <tr>
                                <td>
                                    <img src="${item.imageUrl}" class="cart-img" alt="${item.flowerName}"
                                         onerror="this.src='https://via.placeholder.com/100x100?text=暂无图片'">
                                </td>
                                <td>${item.flowerName}</td>
                                <td>￥${item.price}</td>
                                <td>
                                    <div class="input-group" style="width: 150px;">
                                        <button class="btn btn-outline-secondary" type="button" 
                                                onclick="updateQuantity(${item.id}, -1)">-</button>
                                        <input type="text" class="form-control text-center" value="${item.quantity}" 
                                               id="quantity-${item.id}" readonly>
                                        <button class="btn btn-outline-secondary" type="button" 
                                                onclick="updateQuantity(${item.id}, 1)">+</button>
                                    </div>
                                </td>
                                <td>￥${item.subtotal}</td>
                                <td>
                                    <button class="btn btn-danger btn-sm" onclick="removeFromCart(${item.id})">删除</button>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4" class="text-end"><strong>总计：</strong></td>
                            <td colspan="2">
                                <c:set var="total" value="0" />
                                <c:forEach items="${cartItems}" var="item">
                                    <c:set var="total" value="${total + item.subtotal}" />
                                </c:forEach>
                                <strong>￥${total}</strong>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            
            <div class="d-flex justify-content-between mt-3">
                <a href="${pageContext.request.contextPath}/shop" class="btn btn-secondary">继续购物</a>
                <a href="${pageContext.request.contextPath}/shop/checkout" class="btn btn-primary">去结算</a>
            </div>
        </c:if>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script>
        function updateQuantity(itemId, delta) {
            const input = document.getElementById('quantity-' + itemId);
            const newQuantity = parseInt(input.value) + delta;
            if (newQuantity < 1) return;
            
            $.post("${pageContext.request.contextPath}/shop/cart/update", {
                id: itemId,
                quantity: newQuantity
            }, function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert(response.message || "更新失败，请重试");
                }
            });
        }
        
        function removeFromCart(itemId) {
            if (!confirm('确定要删除这个商品吗？')) return;
            
            $.post("${pageContext.request.contextPath}/shop/cart/remove", {
                id: itemId
            }, function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert(response.message || "删除失败，请重试");
                }
            });
        }
    </script>
</body>
</html> 